Discover how HTML defines the content and structure of a website, the role of hypertext and markup, and essential tags such as headings and paragraphs in shaping web pages.

Learn how to download course resources, extract zipped files on Mac or Windows, and drag the extracted folder into Visual Studio Code to access images, sounds, and code files.

Learn to create accessible web headings using HTML heading elements, mastering h1 through h6, opening and closing tags, and maintaining a strict hierarchy to structure content.

Learn how to use the HTML paragraph element to format text and create distinct paragraphs with the <p> tag, improving accessibility for screen readers through hands-on practice.

Discover HTML void elements like the horizontal rule and break, learn their self-closing syntax with a trailing slash, and apply them to structure poetry lines and addresses while considering accessibility.

Build a simple html movie ranking page with a main title, subtitle, horizontal rule, three h3 movie entries, and a paragraph detailing why you liked them.

Boost motivation by setting visible goals and reflecting on why you’re learning to code. Complete the goal worksheet, articulate your aims, and print and display it to stay focused.

Master creating lists in html with ul for bullets and ol for numbers, using li items; the cinnamon rolls recipe example demonstrates practical practice.

Master nesting and indentation by embedding unordered and ordered lists within list items, and learn to read and write clearly using proper tag closures and VS Code indentation.

Learn the anchor element, how href turns text into active hyperlinks, and apply global attributes like draggable while building an ordered list of five links and adjusting the start attribute.

Learn to add images with the image tag, its src attribute and void, self-closing nature, and understand alt text for accessibility and screen readers.

Create a birthday invite website that uses a retro 90s look, featuring an image, an unordered list of what to bring, and an anchor tag linking to a map.

Build a daily coding habit with the calendar streak trick, marking each day you practice. Maintain a 30–40 day streak to sustain momentum and steadily improve your skills.

Master absolute and relative file paths, navigate with ./ and ../, and apply relative paths to load images in web development projects.

Explore building multi-page websites by organizing files into a project folder with index.html, linking pages like about.html and contact.html using anchor tags, href, and image tags with correct src paths.

Build a solid html foundation by mastering the html boilerplate, including doctype, html root, head with utf-8 meta and title, and a well-structured body.

Build your first web developer portfolio using an HTML-only page with project previews, screenshots, and links to about me and contact me sections, following a seven-step workflow.

Learn to host your website for free with GitHub, publish a live portfolio, and enable pages on the main branch.

Create a capstone project to build a professional portfolio on GitHub, showcase real work to potential employers, and practice delivering client-focused specifications without copying tutorials.

Learn how cascading style sheets style web pages by separating presentation from content and transforming HTML into visually appealing layouts. Explore the cascade concept, history, and a live CSS demo.

Explore the three ways to add CSS: inline, internal, and external, and see when to use each, including inline style attributes, internal style tags, and external stylesheets.

Discover how to use CSS selectors—element, class, ID, attribute, and universal selectors—to style HTML elements precisely and understand selector specificity.

Build a simple color vocabulary flashcard website to learn Spanish colors, with square 200x200 images, color titles matching meanings, and styling via an external style.css.

Learn to eliminate distractions to boost study focus by turning on airplane mode, tucking away your phone, and choosing quiet times like early morning or late evening.

Explore CSS color properties, including background-color and color, and learn to use named colors and hex codes from color palettes like colorhunt.co to style text and backgrounds.

Explore CSS font properties, including font-size, font-weight, font-family, and text-align, and compare em and rem units while learning px, pt, and Google Fonts integration.

Master CSS inspection with Chrome developer tools to inspect elements, view and edit live styles, and understand computed properties, sources, and CSS overview.

Explore the CSS box model, including margin, padding, and border, and learn how width, height, and div containers define layout, spacing, and grouping.

Create a motivational poster website and meme maker. Center a poster with a large image, white 5px border, and a bold title in a Libre Baskerville font.

Master the CSS cascade by seeing how position, specificity, type, and !important determine the style when rules conflict. Learn how inline, internal, and external styles interact to override one another.

Learn to combine CSS selectors to target specific elements using grouping, descendant, child, and chaining techniques, applying colors like blueviolet and firebrick, and refining with font-size.

Explore css positioning concepts including static, relative, absolute, and fixed, with practical examples, z-index, and an exercise to position a circle inside a rectangle.

Build the flag of Laos using pure CSS and HTML, mastering selectors, specificity, and positioning to create the red and blue blocks and the white circle.

Angela explains that no one is born with programming genius; success comes from showing up, putting in the hours, and disciplined practice, not luck.

Learn how CSS display properties—block, inline, and inline-block—shape layout, enabling horizontal alignment or vertical stacking, with practical demonstrations and a focus on the display: none behavior.

Learn how the float property wraps text around images, floats blocks left and right, and uses clear to manage layout, and note modern alternatives like flexbox and grid.

Learn to create responsive websites by using media queries, CSS grid, and flexbox, and leverage Bootstrap's 12-column system to adapt layouts across devices.

Explore how media queries control responsive design by using max-width and min-width breakpoints to tailor styles for mobile, tablet, and desktop screens.

Design a responsive web design agency site that showcases work with text and image blocks, using floats, display, and breakpoints to stack content on mobile.

Angela explains how prep rituals fuel procrastination and outlines the Pomodoro Technique: 25 minutes of focused work followed by a 5-minute break to stay productive.

Explore how flexbox revolutionizes web layout by turning a container into a flexible, responsive system that replaces tables, floats, and inline-block techniques for complex navigation and page structures.

Learn how flex-direction shapes the main axis and cross-axis to switch between row and column layouts, and apply flex-basis to flex items to control size.

Explore flexbox layout fundamentals: control flex-direction, wrap, order, justify-content, align-items, align-content, and align-self, with practical demos and the Flexbox Froggy game.

Master flex sizing in flexbox by learning how min-width, max-width, width, height, flex-basis, and content width determine item sizes, and how flex-grow and flex-shrink shape responsive behavior.

Build a responsive pricing table with flexbox, using dynamic card widths, vertical stacking on small screens, a centered layout, and font and color styling guided by a media query.

Link coding practice to an existing daily habit by creating a cue, such as brushing teeth, to trigger a focused coding session each day.

Explore css grid to create two-dimensional layouts and compare grid with flexbox, then use grid-template-columns, grid-template-rows, and a chessboard of 8x8 squares sized 100px.

Explore how to size grid columns and rows with CSS grid, using fixed sizes, rem, auto, fr fractions, minmax, and repeat, plus grid-auto-rows for responsiveness.

Learn to lay out items in a CSS grid, define tracks and lines, and position grid items with grid-column, grid-row, and grid-area, while using flexbox to center and overlap content.

Learn to recreate a Mondrian painting using css grid, defining columns and rows, gaps, and grid areas, then center the layout with flexbox and apply precise colors.